// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue';
import { Button } from 'element-ui';

const ruleMap = {
  domain: [
    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
  ],
  ip: [{ min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }]
};

Vue.component('my-form-com', {
  render(h) {
    // <-- h must be in scope

    let formItems = this.options.map(item => {
      if (Array.isArray(item)) {
        let colSpan = parseInt(24 / item.length);
        return (
          <el-row gutter={20}>
            {item.map(arrItem => {
              return (
                <el-col span={colSpan}>
                  {this.constructFormItem(arrItem)}
                </el-col>
              );
            })}
          </el-row>
        );
      } else {
        return this.constructFormItem(item);
      }
    });
    return (
      <div>
        <el-form
          model={this.formModel}
          rules={this.rules}
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          {formItems}

          <Button
            onClick={() => {
              console.log(this.formModel);
            }}
          >
            nihao
          </Button>
        </el-form>
      </div>
    );
  },
  data() {
    let options = this.options || [];
    let model = {};
    let rules = {};
    for (let item of options) {
      if (Array.isArray(item)) {
        for (let subitem of item) {
          this.constructModelAndRules(model, rules, subitem);
        }
      } else {
        this.constructModelAndRules(model, rules, item);
      }
    }

    console.log(rules);

    return {
      formModel: model,
      rules: rules
    };
  },
  props: {
    options: {
      type: Array,
      required: true
    },
    isReadOnly: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  methods: {
    constructFormItem(settings) {
      let { keyName } = settings;
      let keyNameArr = keyName.split('|');
      let modelVal = this.formModel;
      let lastObj = null;
      let lastKey = '';
      for (let i = 0, len = keyNameArr.length; i < len; i++) {
        let key = keyNameArr[i];
        if (i == len - 1) {
          lastObj = modelVal;
          lastKey = key;
          break;
        }
        modelVal = modelVal[key];
      }

      return (
        <el-form-item
          label={settings.label}
          prop={settings.keyName}
          required={settings.isRequired}
        >
          {settings.componentType == 'input' ? (
            <el-input
              value={lastObj[lastKey]}
              onInput={event => {
                lastObj[lastKey] = event;
                this.$emit('input',event);
              }}
            />
          ) : (
            ''
          )}

          {settings.componentType == 'select' ? (
            <el-select
              value={lastObj[lastKey]}
              onInput={event => {
                lastObj[lastKey] = event;
                this.$emit('input', event);
              }}
            >
              {(settings.options || []).map(option => (
                <el-option label={option.label} value={option.value} />
              ))}
            </el-select>
          ) : (
            ''
          )}
        </el-form-item>
      );
    },
    constructModelAndRules(model, rules, item) {
      let { keyName } = item;
      let keyNameArr = keyName.split('|');
      if (keyNameArr.length > 1) {
        let firstKey = keyNameArr[0];
        model[firstKey] = model[firstKey] || {};
        let tmpModel = model[firstKey];
        for (let i = 1, len = keyNameArr.length; i < len; i++) {
          let t_keyName = keyNameArr[i];
          if (i == len - 1) {
            tmpModel[t_keyName] = item.defaultValue || '';
          } else {
            if (tmpModel[t_keyName]) {
            } else {
              tmpModel[t_keyName] = {};
            }
            tmpModel = tmpModel[t_keyName];
          }
        }
      } else {
        model[keyName] = item.defaultValue || '';
      }

      rules[item.keyName] = (ruleMap[item.fieldType] || []).concat(
        item.rules || []
      );
    }
  }
});
